<template>
    <div :class="`nav-beadcrumb-${theme}`">
        <Breadcrumb>
            <BreadcrumbItem v-for="item in currentPath" :to="item.path" :key="item.name">{{ itemTitle(item) }}</BreadcrumbItem>
        </Breadcrumb>
    </div>
</template>

<script>
export default {
    name: 'breadcrumbNav',
    props: {
        currentPath: Array,
        theme: {
            type: String,
            default: 'light'
        }
    },
    methods: {
        itemTitle(item) {
            if (typeof item.title == 'object') {
                return this.$t(item.title.i18n);
            } else {
                return item.title;
            }
        }
    }
};
</script>

<style lang="less">
.nav-beadcrumb-darkblue {
    .ivu-breadcrumb a {
        color: hsla(0, 0%, 100%, 0.65);
    }
    .ivu-breadcrumb > span:last-child {
        color: hsla(0, 0%, 100%, 0.65);
    }
}

.nav-beadcrumb-primary,
.nav-beadcrumb-black {
    .ivu-breadcrumb {
        color: #f0f0f0;
    }
    .ivu-breadcrumb a {
        color: #fff;
    }
    .ivu-breadcrumb > span:last-child {
        color: #fff;
    }
}
</style>
